import { Card, Tag, Checkbox } from 'myselfantd';
import styles from './index.module.scss';
// import { findAllFarmList, findAllMachineList } from '@/services/api/enterprise';
import { useEffect, useState } from 'react';
import MapCard from './MapCard';
export default ({ params, onSelectDataChange }: any) => {
  const [data, setData] = useState([] as any);
  const [selectData, setSelectData] = useState([] as any);
  useEffect(() => {
    getDataList();
  }, []);
  const getDataList = async () => {
    // let { result } = await findAllFarmList({
    //   companyId: params.id,
    //   pageIndex: 1,
    //   pageSize: 100,
    // });
    // setData(result);
    // let selected = result.allMapPageList?.data
    //   .filter((item: any) => Boolean(item.isAllocate))
    //   .map((item: any) => item.code);
    // setSelectData(selected);
    // onSelectDataChange(selected);
    // onSelectDataChange(selected);
  };

  const handleCheckboxChange = (options: any) => {
    console.log(options, data.allMapPageList?.data);
    setSelectData(options);
    onSelectDataChange(options);
  };
  const handleTagClose = (removedTag: string) => {
    const newTags = selectData.filter((tag: any) => tag !== removedTag);
    setSelectData(newTags);
    onSelectDataChange(newTags);
  };

  const findNameById = (id: string, data: Array<any>, field: any) => {
    if (!id) {
      return '';
    }
    let target = data?.find((item: any) => item[field.id] === id) || {};
    return target[field.name];
  };

  return (
    <div>
      <Checkbox.List
        selectList={selectData}
        data={data.allMapPageList?.data}
        onChange={handleCheckboxChange}
      >
        <Card.Checkbox fileld={{ name: 'name', key: 'code', value: 'code' }}>
          <MapCard params={params} />
        </Card.Checkbox>
      </Checkbox.List>
      <div className={styles.selectedTags}>
        已选中{selectData?.length}个：
        {selectData?.map((item: string) => (
          <Tag
            key={item}
            closable
            style={{ marginBottom: '10px' }}
            color="processing"
            onClose={() => handleTagClose(item)}
          >
            {findNameById(item, data.allMapPageList?.data, { id: 'code', name: 'name' })}
          </Tag>
        ))}
      </div>
    </div>
  );
};
